<template>
  <table class="line-box-table">
    <tr>
      <th v-for="(item, index) in headList" :key="index" class="line-box-head">
        <slot :name="item.slot + 'head'" :item="item" :index="index">
          <div :style="{
             maxWidth: item.width
          }">
            {{ item.title }}
          </div>
        </slot>
      </th>
    </tr>
    <tr class="line-tr" v-for="(item, index) in sourceData" :key="index" @mouseover="mouseover(item, index)" @click="lineClick(item, index)">
      <td v-for="(item1, index1) in headList" :key="index1">
        <div class="cell">
          <slot :name="item1.slot" :item="item" :index="index">
            <div>
              {{ item1.formatter ? item1.formatter(item) : item[item1.field] || '' }}
            </div>
          </slot>
        </div>
      </td>
    </tr>
  </table>
</template>

<script>
export default {
  name: "grid",
  props: {
    headList: {
      type: [Array, Object],
      default: () => {
        return []
      }
    },
    sourceData: {
      type: [Array],
      default: () => {
        return []
      }
    }
  },
  data () {
    return {
    }
  },
  methods: {
    mouseover (item, index) {
      this.$emit('mouseover', item, index)
    },
    lineClick (item, index) {
      this.$emit('lineClick', item, index)
    },
  }
}
</script>

<style scoped lang="scss">
.line-box-table {
  width: 100% !important;
  border-collapse:separate !important;
  border-spacing:0 12px !important;
  & .line-box-head {
    color: #35405A;
    text-align: center;
  }
  & .line-tr {
    color: #35405A;
    height: 50px;
    background-color: #f4f7fb;
  }
  & .line-tr:hover {
    background-color: #F6FFFF;
    cursor: pointer;
  }
  & .cell {
    text-align: center;
  }
}
</style>